<script setup>
import DatePicker from '@/components/DatePicker.vue'
import { ref, watch } from 'vue'
import InsertText from './InsertText.vue'
import { ArrowDown } from '@element-plus/icons-vue'

// 分类清单数据
const classifyList = ref([
  {
    id: 1,
    classifyName: '学习',
  },
  {
    id: 2,
    classifyName: '工作',
  },
  {
    id: 3,
    classifyName: '购物',
  },
])
// 添加选中的分类
const selectedClassify = ref('选择事项分类')
// 添加处理下拉菜单选择的方法
const handleCommand = (command) => {
  selectedClassify.value = command
}
// 接收任务分类名称，进行渲染
const props = defineProps({
  ClassifyName: String
})
// 未完成任务列表
const toFinishList = ref([
  { 
    id: '1',
    title: '洗碗',
    content: '我不想洗碗，为什么要让我洗碗',
    date: '2025年2月14日'
  },
  {
    id: '2',
    title: '扫地',
    content: '我不想扫地，为什么要让我扫地',
    date: '2025年2月15日'
  },
  {
    id: '3',
    title: '擦桌子',
    content: '我不想擦桌子，为什么要让我擦桌子',
    date: '2025年2月16日'
  },
])
// 已完成任务列表
const finishedList = ref([
  { 
    id: '4',
    title: '看电视',
    content: '我想看电视，我已经看过电视了',
    date: '2025年2月14日'
  },
  {
    id: '5',
    title: '刷抖音',
    content: '我想刷抖音，我已经刷过抖音了',
    date: '2025年2月15日'
  },
  {
    id: '6',
    title: '吃辣条',
    content: '我想吃辣条，我已经吃过辣条了',
    date: '2025年2月16日'
  },
])
// 未完成任务数量
const toFinishCount = ref(toFinishList.value.length || 0)
// 已完成任务数量
const finishedCount = ref(finishedList.value.length || 0)
// 输入任务信息
const taskInfo = ref({
  id: '',
  title: '',
  content: '',
  date: ''
})
// 记录完成时间
const date = ref('')
// 从子组件获取完成时间
const getDate = (dateTime) => {
  date.value = dateTime
  console.log('获取时date.value' + date.value)
}
// 添加任务事件
const inputTask = () => {
  console.log('添加时date.value' + date.value)
  if (taskInfo.value.title) {
    toFinishList.value.push({
      id: Date.now().toString(),
      title: taskInfo.value.title,
      content: taskInfo.value.content,
      date: date.value
    })
  }
  taskInfo.value.id = ''
  taskInfo.value.title = ''
  taskInfo.value.content = ''
  taskInfo.value.date = ''
  // date.value = ''
}
// 完成任务事件
const finishedClick = (id) => {
  // 先获得完成的事件
  // filter返回的是一个数组
  const [info] = toFinishList.value.filter(item => item.id === id)
  console.log('finishedClick, info:' + JSON.stringify(info))
  // 放进已完成列表
  if (info) {
    finishedList.value.unshift(info)
    toFinishList.value = toFinishList.value.filter(item => item.id !== id)
  }
  console.log('toFinishList.value' + JSON.stringify(toFinishList.value))
}
// 删除未完成任务事件
const deleteToFinishTask = (id) => {
  toFinishList.value = toFinishList.value.filter(item => item.id !== id)
}
// 删除已完成任务事件
const deleteFinishedTask = (id) => {
  finishedList.value = finishedList.value.filter(item => item.id !== id)
}
// 拖动开始
const dragstart = (index, event) => {
  event.dataTransfer.setData("text", index)
  console.log("您已成功拖动元素" + index)    
}
// 进行放置
const drop = (targetIndex, list, event) => {
  const draggedIndex = parseInt(event.dataTransfer.getData("text"), 10); // 转换为整数
  const draggedTask = list[draggedIndex]; // 获取拖拽的任务
  list.splice(draggedIndex, 1); // 先移除原位置的元素
  list.splice(targetIndex, 0, draggedTask); // 在新位置插入
  console.log("drop", event)
  console.log('targetIndex:' + targetIndex + '.')
  console.log('draggedIndex:' + draggedIndex + '.')
  console.log(list)
}
// 放置位置 - 阻止默认事件,即允许放置
const dragover = (event) => {
  event.preventDefault()
}
// 右侧顶部渲染题目
const title = ref('洗碗')  // 后续从接口获取
const inpTitle = ref(title || '请输入事项标题') 
// 监听列表变化，实时修改数量
watch(
  [toFinishList, finishedList],
  () => {
    console.log('列表发生变化了')  
    toFinishCount.value = toFinishList.value.length
    finishedCount.value = finishedList.value.length
  },
  {
    deep: true
  }
)
</script>

<template>
  <div class="list">
    <!-- 顶部 -->
    <div class="list-header">
      <div class="left">
        <div class="iconfont">&#xe790;</div>
        <div class="header-title">{{ ClassifyName }}</div>
      </div>
      <div class="right">
        <div class="iconfont">&#xe648;</div>
        <div class="iconfont">&#xe60c;</div>
      </div>
    </div>
    <!-- 添加任务输入框 -->
    <div class="input">
      <input v-model.trim="taskInfo.title" @keyup.enter="inputTask" placeholder="+ 添加任务至收集箱" type="text">
      <div class="input-calendar">
        <!-- <span class="iconfont">&#xe705;</span> -->
        <DatePicker @input-date="getDate"></DatePicker>
      </div>
    </div>
    <!-- 任务部分 -->
    <div class="tasks">
      <!-- 未完成 -->
      <div class="toFinish">
        <div class="section-header">
          <span class="iconfont">&#xe649;</span>
          <div class="title">未完成</div>
          <span class="count">{{ toFinishCount }}</span>
        </div>
        <!-- 任务列表 -->
        <div class="tasksList">
          <ul>
            <li draggable="true" 
            @dragstart="dragstart(index, $event)"
            @drop.prevent="drop(index, toFinishList, $event)"
            @dragover.prevent="dragover"
            v-for="(item, index) in toFinishList" 
            :key="item.id"
            >
              <div class="task">
                <!-- 拖动排序按钮 -->
                <SortBtn class="drag-handle"></SortBtn>
                <div @click="finishedClick(item.id)" class="iconfont">&#xe642;</div>
                <div class="text">{{ item.title }}</div>
              </div>
              <div class="icon">
                <div class="date">{{ item.date }}</div>
                <!-- 删除按钮 -->
                <DeleteTaskBtn :deleteClick="() => deleteToFinishTask(item.id)"></DeleteTaskBtn>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 已完成 -->
      <div class="finished">
        <div class="section-header">
          <span class="iconfont">&#xe649;</span>
          <div class="title">已完成</div>
          <span class="count">{{ finishedCount }}</span>
        </div>
        <!-- 任务列表 -->
        <div class="tasksList">
          <ul>
            <li draggable="true" 
            @dragstart="dragstart(index, $event)" 
            @drop.prevent="drop(index, finishedList, $event)" 
            @dragover.prevent="dragover"  
            v-for="(item, index) in finishedList" 
            :key="item.id"
            >
              <div class="task">
                <SortBtn></SortBtn>
                <div class="iconfont">&#xe79e;</div>
                <div class="text">{{ item.title }}</div>
              </div>
              <div class="icon">
                <div class="date">{{ item.date }}</div>
                <!-- 父传子传给子组件来删除任务 -->
                <DeleteTaskBtn :deleteClick="() => deleteFinishedTask(item.id)"></DeleteTaskBtn>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <TaskCard></TaskCard>

  <!-- 最右侧 -->
  <!-- <div class="content">
    <div class="content-header">
      <div class="iconfont">&#xe646;</div>
      选择完成日期
      <span style="cursor: pointer;" class="date">2025年2月14日</span>
      输入事项标题
      <input class="inpTitle" placeholder="请输入事项标题" :value="inpTitle"/>
      选择事项分类
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ selectedClassify }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="item.classifyName" v-for="item in classifyList">{{ item.classifyName }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="insertText">
      <InsertText></InsertText>
    </div>
  </div> -->

</template>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100vh;
  display: flex;
  padding-bottom: 30px;
  flex-direction: column;
  border-right: 1px solid #ccc;
  overflow: auto;

  .list-header {
    margin: 20px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left,
    .right {
      display: flex;
      align-items: center;

      .iconfont {
        margin-right: 10px;
        font-size: 23px;
        color: #a3a3a3;
        cursor: pointer;
      }

      .header-title {
        font-size: 22px;
        font-weight: 700;
      }
    }
  }

  .input {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0 20px 20px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #466ff5;

    input {
      width: 85%;
      height: 20px;
      border: none;
    }

    input:focus {
      border: none;
      outline: none;
    }
    
    input::placeholder {
      color: #e0dede;
    }

    .input-calendar {
      display: flex;
      margin: 0 10px;
      font-size: 12px;
      cursor: pointer;
    }

    .input-calendar:hover,
    .iconfont:hover {
      color: #466ff5;
    }

    .iconfont {
      font-size: 16px;
      cursor: pointer;
    }
  }

  .tasks {
    overflow: auto;

    .toFinish,
    .finished {
      margin: 0 20px;
      
      .section-header {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #a3a3a3;

        .title {
          margin: 0 5px;
          color: #000;
          font-weight: 700;
        }
      }
      
      .tasksList {
        ul li {
          height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
          padding: 0 15px 0 0;
          .task {
            display: flex;
            align-items: center;

            .iconfont {
              margin: 0 8px;
              color: #466ff5;
              font-size: 20px;
            }

            .text {
              font-size: 14px;
            }
          }
          .icon {
            display: flex;
            align-items: center;

            .date {
              margin-right: 5px;
              font-size: 12px;
              color: #466ff5;
            }
          }
        }

        ul li:hover {
          border-radius: 5px;
          background-color: #f1f1f1;
        }
      }
    }
  }


  .finished {
    .iconfont,
    .text,
    .date {
      color: #a3a3a3 !important;
    }
  }
}

.content {
  height: 100vh;
  padding-bottom: 30px;

  .content-header {
    height: 40px;
    display: flex;
    align-items: center;
    margin: 20px;
    font-size: 14px;
    color: #466ff5;
    border-bottom: 1px solid #ccc;

    .iconfont {
      margin-right: 6px;
      font-size: 20px;
    }

    .inpTitle {
      width: 50%;
      height: 30px;
      margin: 0 10px;
      padding-left: 10px;
      font-size: 15px;
      color: #000;
      border: none;
      border-radius: 5px;
      background-color: #F1F1F1;
    }

    .inpTitle:focus {
      outline: none;
    }

    .example-showcase .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}

// 原部分
// 超小屏幕下
@media screen and (max-width: 575px) {
  .list {
    width: 100%;
  }

  .content {
    display: none;
  }
}

// 小屏幕下
@media screen and (min-width: 576px) {
  .list {
    width: 81%;
  }

  .content {
    display: none;
  }
}

// 中等、大、超大屏幕下
@media screen and (min-width: 768px) {
  .list {
    width: 40%;
  }

  .content {
    width: 41%;
    display: block;
  }
}

</style>
